<!DOCTYPE html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<div id="main" style="width:100%;height:500px;"></div>
<script src="/static/js/echarts.js"></script>
<script src="/static/js/bmap.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=btRw9mRbmherwsni7AIeh9rXxtTxLib7"></script>
<script>
    var Ajax = function () {
        $.getJSON("http://localhost:8080/ai", function (data) {


            var myChart = echarts.init(document.getElementById('main'));
            var points = [].concat.apply([], data.map(function (track) {
                return track.map(function (seg) {
                    var ret = seg.coord.concat([1]).concat(seg.name);
                    return ret;
                });
            }));

            myChart.setOption(option = {
                animation: false,
                bmap: {
                    center: [120.305455901, 31.5700374519],
                    zoom: 14,
                    roam: true
                },
                // visualMap: {
                //     show: false,
                //     top: 'top',
                //     min: 0,
                //     max: 5,
                //     seriesIndex: 0,
                //     calculable: true,
                //     inRange: {
                //         color: ['blue', 'blue', 'green', 'yellow', 'red']
                //     }
                // },
                tooltip: {
                    trigger: 'item',
                    formatter: function (item) {
                        return item.data[3]
                    }
                },
                series: [{
                    type: 'scatter',
                    coordinateSystem: 'bmap',
                    data: points,
                    pointSize: 5,
                    blurSize: 6,
                    itemStyle:
                        {
                            normal: {
                                color: function (item) {
                                    var name = item.data[3];
                                    if (name.indexOf("韩美美莱") != -1) {
                                        return "blue";
                                    } else {
                                        return "red";
                                    }

                                }
                            }

                        }
                }]
            });
            var bmap = myChart.getModel().getComponent('bmap').getBMap();
            bmap.addControl(new BMap.MapTypeControl());
        });
    }();
</script>
</html>